<template>
  <div class="app-monitor-b">
    <el-row :gutter="20">
      <el-col
        :span="show ? rowObj.T1 : rowObj.F1"
        :xs="show ? rowObj.T2 : rowObj.F2"
      >
        <workSiteLeft
          ref="workSiteLeft"
          :show="show"
          @showLeft="showLeft"
          @queryVal="queryVal"
        />
      </el-col>
      <el-col
        :span="show ? rowObj.T3 : rowObj.F3"
        :xs="show ? rowObj.T4 : rowObj.F4"
      >
        <div>
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="mini"
            :inline="true"
            v-show="showSearch"
            label-width="80px"
          >
            <el-button
              style="margin-left: 20px"
              size="mini"
              :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
              circle
              @click="showLeft(show)"
            ></el-button>
            <el-form-item label="拌合楼" prop="stationCode">
              <el-select
                style="width: 130px"
                v-model="queryParams.stationCode"
                clearable
                size="mini"
                placeholder="请选择拌合楼"
              >
                <el-option
                  v-for="item in cementListData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="级配类型" prop="matchType">
              <el-select
                style="width: 120px"
                v-model="queryParams.matchType"
                clearable
                size="mini"
                placeholder="请选择级配类型"
              >
                <el-option
                  v-for="item in matchTypeList"
                  :key="item.id"
                  :label="item.type"
                  :value="item.type"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="用料项目">
              <el-input
                style="width: 120px"
                v-model="queryParams.projectName"
                placeholder="用料项目"
                clearable
                filterable
              ></el-input>
            </el-form-item>

            <el-form-item label="配方编号">
              <el-input
                style="width: 120px"
                v-model="queryParams.matchCode"
                placeholder="配方编号"
                clearable
                filterable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="onSearch"
                >搜索</el-button
              >
              <el-button type="success" icon="el-icon-thumb" size="mini"
                         :loading="checkLoading" @click="handleCheck">手动校验</el-button>
              <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
            </el-form-item>
          </el-form>

          <div class="tabsBox">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="重量" name="0">
                <el-table
                  :data="weightPageData"
                  fit
                  border
                  size="mini"
                  highlight-current-row
                  stripe
                  :span-method="setTableMethod"
                  :height="tableHeight"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="55" align="center" fixed />
                  <el-table-column
                    prop="dischargeTime"
                    label="时间"
                    align="center"
                    width="133"
                    fixed="left"
                    key="dischargeTimeWeight"
                  ></el-table-column>
                  <!-- <el-table-column
                    prop="matchCode"
                    label="配方编号"
                    align="center"
                    min-width="90"
                    show-overflow-tooltip
                    fixed="left"
                    key="matchCodeWeight"
                  ></el-table-column> -->
                  <!-- <el-table-column
                    prop="mixingDuration"
                    label="搅拌时长"
                    align="center"
                    width="80"
                    fixed="left"
                    key="mixingDurationWeight"
                  ></el-table-column> -->
                  <!-- <el-table-column prop="dischargeTemperature" label="出料温度" align="center" min-width="73" fixed="left"
                    key="dischargeTemperatureWeight"></el-table-column> -->
                  <el-table-column
                    prop="asphaltTemperature"
                    label="成品料温"
                    align="center"
                    min-width="73"
                    fixed="left"
                    key="asphaltTemperature"
                  ></el-table-column>

                  <el-table-column
                    prop="matchName"
                    label="配方名称"
                    align="center"
                    min-width="90"
                    fixed="left"
                    key="matchName"
                  ></el-table-column>

                  <el-table-column
                    prop="batchWeight"
                    label="总重量(kg)"
                    align="center"
                    key="batchWeightWeight"
                    filter-multiplewidth="100"
                    min-width="85"
                  ></el-table-column>
                  <el-table-column
                    prop="desc"
                    label="类别"
                    align="center"
                    key="desc"
                    filter-multiplewidth="100"
                    min-width="85"
                  ></el-table-column>
                  <!-- <el-table-column label="级配曲线" align="center" width="73" fixed="left" key="lineChartWeight">
                    <template slot-scope="scope"><a class="link" style="color: #2d8cf0"
                        @click="showLinechar(scope.row)">查看</a></template>
                  </el-table-column> -->

                  <el-table-column
                    prop="asphaltAggregateRatio"
                    label="油石比（%）"
                    align="center"
                    key="asphaltAggregateRatioWeight"
                    filter-multiplewidth="80"
                    min-width="120"
                  ></el-table-column>
                  <template v-for="item of colControl">
                    <el-table-column
                      :label="item.label + '(kg)'"
                      align="center"
                      :key="item.value + 'ActWeight'"
                      min-width="120"
                    >
                      <template slot-scope="scope"
                        ><span>{{
                          scope.row[item.value + "Act"] || "-"
                        }}</span></template
                      >
                    </el-table-column>
                  </template>
                  <el-table-column
                    prop="asphaltAct"
                    label="沥青(kg)"
                    align="center"
                    key="asphaltActWeight"
                    min-width="120"
                  >
                    <template slot-scope="scope"
                      ><span>{{ scope.row.asphaltAct || "-" }}</span></template
                    >
                  </el-table-column>
                  <el-table-column
                    prop="recycledMaterialAct"
                    label="再生料(kg)"
                    align="center"
                    key="recycledMaterialActWeight"
                    width="120"
                  >
                    <template slot-scope="scope"
                      ><span>{{
                        scope.row.recycledMaterialAct || "-"
                      }}</span></template
                    >
                  </el-table-column>
                  <!-- <el-table-column
                    label="详情"
                    align="center"
                    width="73"
                  >
                    <template slot-scope="scope"
                      ><a
                        class="link"
                        style="color: #2d8cf0"
                        @click="getAsphaltDataWeight(scope.row)"
                        >详情</a
                      ></template
                    >
                  </el-table-column> -->
                </el-table>
                <pagination
                  class="fenye"
                  v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getWeightPage"
                />
              </el-tab-pane>

              <el-tab-pane label="内掺配比" name="1">
                <el-table
                  :data="internalDopingPageData"
                  fit
                  border
                  size="mini"
                  highlight-current-row
                  stripe
                >
                  <el-table-column
                    prop="dischargeTime"
                    label="时间"
                    align="center"
                    width="150"
                    fixed="left"
                    key="dischargeTimeWeight"
                  ></el-table-column>
                  <el-table-column
                    prop="matchCode"
                    label="配方编号"
                    align="center"
                    min-width="100"
                    show-overflow-tooltip
                    fixed="left"
                    key="matchCodeWeight"
                  ></el-table-column>
                  <el-table-column
                    prop="mixingDuration"
                    label="搅拌时长"
                    align="center"
                    min-width="75"
                    fixed="left"
                    key="mixingDurationWeight"
                  ></el-table-column>
                  <el-table-column
                    prop="dischargeTemperature"
                    label="出料温度"
                    align="center"
                    min-width="75"
                    fixed="left"
                    key="dischargeTemperatureWeight"
                  ></el-table-column>
                  <el-table-column
                    label="级配曲线"
                    align="center"
                    width="75"
                    fixed="left"
                    key="lineChartWithin"
                  >
                    <template slot-scope="scope"
                      ><a class="link" @click="showLinechar(scope.row)"
                        >查看</a
                      ></template
                    >
                  </el-table-column>
                  <template v-for="item of colControl">
                    <el-table-column
                      :label="item.label + '(%)'"
                      align="center"
                      :key="item.value + 'Ratio'"
                      min-width="75"
                    >
                      <template slot-scope="scope"
                        ><span>{{
                          scope.row[item.value + "RatioWithin"] || "-"
                        }}</span></template
                      >
                    </el-table-column>
                  </template>
                  <el-table-column
                    prop="asphaltRatio"
                    label="沥青"
                    align="center"
                    key="asphaltActWeight"
                    min-width="65"
                  >
                    <template slot-scope="scope"
                      ><span>{{
                        scope.row.asphaltRatio || "-"
                      }}</span></template
                    >
                  </el-table-column>
                  <el-table-column
                    prop="recycledMaterialRatio"
                    label="再生料"
                    align="center"
                    key="recycledMaterialRatioWithin"
                    min-width="75"
                  >
                    <template slot-scope="scope"
                      ><span>{{
                        scope.row.recycledMaterialRatio || "-"
                      }}</span></template
                    >
                  </el-table-column>



                </el-table>
                <pagination
                  class="fenye"
                  v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getInternalDopingPage"
                />
              </el-tab-pane>

              <el-tab-pane label="外掺配比" name="2">
                <el-table
                  :data="externalDopingPageData"
                  fit
                  border
                  size="mini"
                  highlight-current-row
                  stripe
                >
                  <el-table-column
                    prop="dischargeTime"
                    label="时间"
                    align="center"
                    width="150"
                    fixed="left"
                    key="dischargeTimeWeight"
                  ></el-table-column>
                  <el-table-column
                    prop="matchCode"
                    label="配方编号"
                    align="center"
                    min-width="100"
                    show-overflow-tooltip
                    fixed="left"
                    key="matchCodeWeight"
                  ></el-table-column>
                  <el-table-column
                    prop="mixingDuration"
                    label="搅拌时长"
                    align="center"
                    min-width="75"
                    fixed="left"
                    key="mixingDurationWeight"
                  ></el-table-column>
                  <el-table-column
                    prop="dischargeTemperature"
                    label="出料温度"
                    align="center"
                    min-width="75"
                    fixed="left"
                    key="dischargeTemperatureWeight"
                  ></el-table-column>
                  <el-table-column
                    label="级配曲线"
                    align="center"
                    fixed="left"
                    key="lineChartOutside"
                    width="75"
                  >
                    <template slot-scope="scope"
                      ><a class="link" @click="showLinechar(scope.row)"
                        >查看</a
                      ></template
                    >
                  </el-table-column>
                  <template v-for="item of colControl">
                    <el-table-column
                      :label="item.label + '(%)'"
                      align="center"
                      :key="item.value + 'RatioOutside'"
                      min-width="75"
                    >
                      <template slot-scope="scope"
                        ><span>{{
                          scope.row[item.value + "Ratio"] || "-"
                        }}</span></template
                      >
                    </el-table-column>
                  </template>
                  <el-table-column
                    prop="asphaltRatio"
                    label="沥青"
                    align="center"
                    key="asphaltRatioOutside"
                    min-width="65"
                  >
                    <template slot-scope="scope"
                      ><span>{{
                        scope.row.asphaltRatio || "-"
                      }}</span></template
                    >
                  </el-table-column>
                  <el-table-column
                    prop="recycledMaterialRatio"
                    label="再生料"
                    align="center"
                    key="recycledMaterialRatioOutside"
                    min-width="75"
                  >
                    <template slot-scope="scope"
                      ><span>{{
                        scope.row.recycledMaterialRatio || "-"
                      }}</span></template
                    >
                  </el-table-column>
                </el-table>
                <pagination
                  class="fenye"
                  v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getExternalDopingPage"
                />
              </el-tab-pane>

              <el-tab-pane label="级配" name="3">
                <el-table
                  :data="asphaltDataSievePageData"
                  :header-cell-style="{ 'text-align': 'center' }"
                  fit
                  border
                  size="mini"
                  highlight-current-row
                  stripe
                >
                  <el-table-column
                    prop="dischargeTime"
                    label="时间"
                    align="center"
                    width="132"
                    fixed="left"
                    key="dischargeTimeWeight"
                  ></el-table-column>
                  <el-table-column
                    prop="matchCode"
                    label="配方编号"
                    align="center"
                    min-width="89"
                    show-overflow-tooltip
                    fixed="left"
                    key="matchCodeWeight"
                  ></el-table-column>
                  <el-table-column
                    prop="mixingDuration"
                    label="搅拌时长"
                    align="center"
                    width="73"
                    fixed="left"
                    key="mixingDurationWeight"
                  ></el-table-column>
                  <el-table-column
                    prop="dischargeTemperature"
                    label="出料温度"
                    align="center"
                    min-width="73"
                    fixed="left"
                    key="dischargeTemperatureWeight"
                  ></el-table-column>
                  <el-table-column
                    label="级配曲线"
                    align="center"
                    width="73"
                    fixed="left"
                    key="lineChartSieve"
                  >
                    <template slot-scope="scope"
                      ><a
                        style="color: #2d8cf0"
                        @click="showLinechar(scope.row)"
                        >查看</a
                      ></template
                    >
                  </el-table-column>
                  <el-table-column
                    prop="asphaltAggregateRatio"
                    label="油石比"
                    align="center"
                    key="asphaltAggregateRatioSieve"
                    min-width="60"
                  ></el-table-column>
                  <template v-for="item of sieveControl">
                    <el-table-column
                      :label="item.label + ''"
                      align="center"
                      :key="'sieve' + item.value + 'Sieve'"
                      min-width="60"
                    >
                      <template slot-scope="scope"
                        ><span>{{
                          scope.row["sieve" + item.value] || "-"
                        }}</span></template
                      >
                    </el-table-column>
                  </template>
                </el-table>
                <pagination
                  class="fenye"
                  v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getAsphaltDataSievePage"
                />
              </el-tab-pane>
              <el-tab-pane label="图形" name="4">
                <div v-loading="loadingTx">
                  <div id="gradeGlobalChar"></div>
                  <div class="info">
                    <p>{{ info }}</p>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 级配查看 -->
    <el-dialog
      :title="'级配曲线：' + matchCodeTxet"
      :visible.sync="forceCurve"
      width="60%"
    >
      <div class="chartBox">
        <div id="lineChar"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="forceCurve = false" size="mini">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import constant from "@/api/waterStability/producedData/constant";
import { cementList } from "@/api/waterStability/producedData/monitor";
import {
  asphaltDataSievePage,
  weightPage,
  asphaltDataWeight,
  internalDopingPage,
  externalDopingPage,
  getDayChartData,
  graphicalPage,
  asphaltMatchTypeList,
  getLatestData,
  getChartData,
  handCheck
} from "@/api/bitumenMixingStation/producedData/monitor";
import workSiteLeft from "@/views/components/workSiteLeft";

export default {
  name: "monitor",
  components: { workSiteLeft },

  data() {
    return {
      show: true,
      rowObj: {
        T1: 3,
        T2: 24,
        T3: 21,
        T4: 24,
        F1: 0,
        F2: 0,
        F3: 24,
        F4: 24,
      },
      stationCodeA: "",
      matchCodeA: "",
      dayA: "",
      chartTx: null,
      info: "",
      loadingTx: false,
      matchCodeTxet: "",
      lineChar: null,
      forceCurve: false,
      matchTypeList: [], //级配类型
      weightPageData: [], //重量
      internalDopingPageData: [], //内掺表格
      externalDopingPageData: [], //内掺表格
      asphaltDataSievePageData: [], //级配
      activeName: "0",
      btnLoading: false,
      cementListData: [], //拌合楼列表
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 级配表格↓
      // 控制显示隐藏表格列
      colControl: [],
      // 默认表格列名称
      colNameDef: {
        gravel1: "骨料1",
        gravel2: "骨料2",
        gravel3: "骨料3",
        gravel4: "骨料4",
        gravel5: "骨料5",
        gravel6: "骨料6",
        powder1: "粉料1",
        powder2: "粉料2",
        powder3: "粉料3",
      },
      // 空值筛孔数据显示隐藏
      sieveControl: [],
      // 默认筛孔列表
      sieveDef: constant.sieveSizeDictList,
      // 当前级配信息
      currentMatch: "",
      tableHeight: window.innerHeight - 280,
      checkLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
    };
  },
  created() {
    this.getAsphaltMatchTypeList();
  },

  mounted() {
    // 如果dom节点未挂接完成，延迟处理
    if (0 == Object.keys(this.$refs)) {
      setTimeout(() => {
        this.init();
      }, 200);
    } else {
      this.init();
    }
  },
  methods: {
    // 合并单元格
    setTableMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 0 ||
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 4
      ) {
        if (rowIndex % 3) {
          return [1, 0];
        } else {
          return [3, 1];
        }
      }
    },
    showLeft(show) {
      this.show = !show;
    },
    queryVal(val) {
      this.queryParams.id = val.id;
      this.onSearch();
    },
    init() {
      this.onSearch();
    },
    /**
     * 执行数据查询
     */
    onSearch() {
      this.currentMatch = undefined;
      if (!!this.queryParams.matchCode) {
        asphaltMatchTypeList().then((res) => {
          console.log(res);
          if (!!res && 0 < res.length) {
            this.currentMatch = res[0];
          }
          this.doSearch();
        });
      } else {
        this.doSearch();
      }
    },
    /**
     * 执行查询
     */
    doSearch() {
      // 每次查询前设置显示控制
      this.initColControl();

      // 调用表格接口查询方法
      this.getWeightPage();
      this.getAsphaltDataSievePage();
      this.getInternalDopingPage();
      this.getExternalDopingPage();
      this.getTxChartData();
    },

    // 级配类型
    getAsphaltMatchTypeList() {
      asphaltMatchTypeList().then((res) => {
        this.matchTypeList = res.data;
      });
    },
    // 查询拌合楼下拉列表
    getCementList() {
      cementList(this.queryParams).then((res) => {
        this.cementListData = res.data || [];
      });
    },
    /** 级配 */
    getAsphaltDataSievePage() {
      console.log("级配");
      asphaltDataSievePage(this.queryParams).then((res) => {
        this.asphaltDataSievePageData = res.rows || [];
        this.total = res.total;
        this.loading = false;
      });
    },

    /** 重量表格 */
    getWeightPage() {
      console.log("重量");
      weightPage(this.queryParams).then((res) => {
        this.weightPageData = res.rows || [];
        this.total = res.total;
        this.loading = false;
      });
    },
    getAsphaltDataWeight(row) {
      asphaltDataWeight(row.id).then((res) => {
        console.log(res);
      });
    },
    /** 内掺表格 */
    getInternalDopingPage() {
      console.log("内掺");
      internalDopingPage(this.queryParams).then((res) => {
        this.internalDopingPageData = res.rows || [];
        this.total = res.total;
        this.loading = false;
      });
    },

    /** 外掺表格 */
    getExternalDopingPage() {
      externalDopingPage(this.queryParams).then((res) => {
        this.externalDopingPageData = res.rows || [];
        this.total = res.total;
        this.loading = false;
      });
    },
    showLinechar(row) {
      getChartData(row.id).then((res) => {
        try {
          this.forceCurve = true;
          this.$nextTick(() => {
            this.createChart(res);
          });
        } catch (error) {}
      });
    },
    /**
     * 创建图表
     */
    createChart(res) {
      console.log(res);
      // 渲染显示区域
      if (null == this.lineChar) {
        this.lineChar = echarts.init(document.getElementById("lineChar"));
      } else {
        this.lineChar.clear();
      }

      // 判断需要显示的筛孔
      let matchType = {};
      let sieveData = {};
      let matchThreshold = {};
      let data = {};
      let match = {};
      if (!!res) {
        if (!!res.data.match) {
          match = res.data.match;
        }
        if (!!res.data.data) {
          data = res.data.data;
          this.matchCode = data.matchCode;
          this.matchCodeTxet = data.matchCode;
        }
        if (!!res.data.data.matchType) {
          matchType = res.data.data.matchType;
        }
        if (!!res.data.datasieveData) {
          sieveData = res.data.data.sieveData;
        }
        if (!!res.data.data.matchThreshold) {
          matchThreshold = res.data.data.matchThreshold;
        }
      }

      // 折线图数据
      let xData = [0];
      let minData = [undefined];
      let maxData = [undefined];
      let relData = [undefined];
      if (!!matchType.sieveArray) {
        matchType.sieveArray.forEach((item) => {
          xData.push(item);

          let code = item.toString().replace(".", "d");
          minData.push(matchThreshold["sieve" + code + "min"]);
          maxData.push(matchThreshold["sieve" + code + "max"]);
          relData.push(sieveData["sieve" + code]);
        });
      }

      // 获取油石比仪表盘数据
      let value = data.asphaltAggregateRatio;
      let startValue = 0;
      let endValue = value;
      let minValue = 0;
      let maxValue = 0;
      let min;
      let max;
      if (!!match.asphaltAggregateRatio) {
        let base = match.asphaltAggregateRatio;
        let error = match.asphaltAggregateError;
        startValue = base - 2 * error;
        endValue = base + 2 * error;
        max = base + error;
        min = base - error;

        if (value > endValue) {
          endValue = value;
          startValue = min - (value - max);
        } else if (value < startValue) {
          startValue = value;
          endValue = min - value + max;
        }

        startValue = Math.floor(startValue * 10) / 10;
        endValue = Math.floor(endValue * 10) / 10;
        if (startValue != endValue) {
          minValue = (min - startValue) / (endValue - startValue);
          minValue = Math.floor(minValue * 100) / 100;

          maxValue = (max - startValue) / (endValue - startValue);
          maxValue = Math.floor(maxValue * 100) / 100;
        }
      }
      let gauge1 = this.getGauge(
        "油石比",
        value,
        startValue,
        endValue,
        minValue,
        maxValue,
        "40%",
        ["25%", "32%"]
      );

      // 获取温度仪表盘数据
      value = data.dischargeTemperature;
      startValue = 0;
      endValue = value;
      minValue = 0;
      maxValue = 0;
      min = match.temperatureMin;
      max = match.temperatureMax;
      console.log(min, max);
      if (!!min && !!max) {
        let error = (max - min) / 2;
        endValue = max + error;
        startValue = min - error;

        if (value > endValue) {
          endValue = value;
          startValue = min - (value - max);
        } else if (value < startValue) {
          startValue = value;
          endValue = min - value + max;
        }

        minValue = min / endValue;
        maxValue = max / endValue;

        startValue = Math.floor(startValue * 10) / 10;
        endValue = Math.floor(endValue * 10) / 10;
        if (startValue != endValue) {
          minValue = (min - startValue) / (endValue - startValue);
          minValue = Math.floor(minValue * 100) / 100;

          maxValue = (max - startValue) / (endValue - startValue);
          maxValue = Math.floor(maxValue * 100) / 100;
        }
      }
      let gauge2 = this.getGauge(
        "温度",
        value,
        startValue,
        endValue,
        minValue,
        maxValue,
        "40%",
        ["80%", "68%"]
      );

      // 绘制图表
      let option = {
        legend: {
          data: ["生产级配", "施工上限", "施工下限"],
          right: 180,
        },
        tooltip: {
          trigger: "axis",
          show: true,
        },
        xAxis: {
          name: "筛孔尺寸",
          nameTextStyle: {
            padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
          },
          data: xData,
          boundaryGap: false,
          axisLine: { onZero: true },
          splitLine: { show: false },
          splitArea: { show: false },
        },
        yAxis: {
          type: "value",
          name: "通过率%",
        },
        grid: {
          top: 60,
          bottom: 20,
          left: 70,
          right: 70,
        },
        series: [
          {
            name: "生产级配",
            type: "line",
            label: {
              show: true,
            },
            data: relData,
            itemStyle: {
              normal: {
                color: "#409eff",
              },
            },
          },
          {
            name: "施工下限",
            type: "line",
            data: minData,
            label: {
              show: true,
            },
            itemStyle: {
              normal: {
                color: "#F3637C",
                lineStyle: {
                  type: "dotted", //'dotted'虚线 'solid'实线
                },
              },
            },
          },
          {
            name: "施工上限",
            type: "line",
            data: maxData,
            label: {
              show: true,
            },
            itemStyle: {
              normal: {
                color: "#F3637C",
                lineStyle: {
                  type: "dotted", //'dotted'虚线 'solid'实线
                },
              },
            },
          },
          gauge1,
          gauge2,
        ],
      };

      this.lineChar.setOption(option);
    },

    /**
     * 获取仪表盘数据
     */
    getGauge(
      title,
      value,
      startValue,
      endValue,
      minValue,
      maxValue,
      radius,
      center
    ) {
      return {
        name: title,
        type: "gauge",
        radius: radius,
        center: center,
        min: startValue,
        max: endValue,
        detail: {
          valueAnimation: true,
          fontSize: 14,
        },
        title: {
          show: true,
          fontSize: 12,
          offsetCenter: [0, "-30%"],
          color: "#000",
        },
        pointer: {
          show: true,
          length: "80%", //指针长度
          radius: "50%",
          width: 1, //指针粗细
        },
        markLine: {
          precision: 2,
        },
        axisTick: {
          //刻度
          show: true,
          splitNumber: 10,
          lineStyle: {
            width: 1,
          },
          length: 3,
        },
        splitLine: {
          show: false,
          length: 0,
          lineStyle: {
            color: "#233446",
          },
        },
        axisLabel: {
          show: true,
          distance: 6,
          fontSize: 10,
          formatter: (params) => {
            return Math.floor(params * 10) / 10;
          },
        },
        axisLine: {
          lineStyle: {
            width: 5,
            color: [
              [minValue, "#f3637c"],
              [maxValue, "#008000"],
              [1, "#f3637c"],
            ],
          },
        },
        data: [
          {
            value: value,
            name: title,
            itemStyle: {
              color: "#07182e",
            },
            textStyle: {
              fontSize: 20,
            },
          },
        ],
      };
    },

    /** 查询水稳拌合站数据列表 */
    // getList() {
    //   this.loading = true;
    //   cementMatchList(this.queryParams).then((response) => {
    //     this.asphaltDataSievePageData = response.data.records;
    //     this.total = response.data.total;
    //     this.loading = false;
    //   });
    // },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams = this.getSearchParams();
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getSearchParams() {
      const params = {};
      for (const key in this.queryParams) {
        if (key === "time") {
          const time = this.queryParams[key];
          if (time && time.length === 2) {
            params.startTime = time[0];
            params.endTime = time[1];
          }
        } else {
          params[key] = this.queryParams[key];
        }
      }
      return params;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    /**
     * 配方编号-数据变化
     */
    valueChange(val) {
      this.currentMatch = val;
    },
    /**
     * 设置表格控制
     */
    initColControl() {
      let colArray = [];
      let sieveArray = [];
      if (this.currentMatch == null || undefined == this.currentMatch) {
        for (const key in this.colNameDef) {
          colArray.push({
            value: key,
            label: this.colNameDef[key],
          });
        }
        // this.sieveDef.forEach((item) => {
        constant.sieveSizeDictList.forEach((item) => {
          sieveArray.push({
            value: item.code,
            label: item.size,
          });
        });
      } else {
        let colName;
        for (const key in this.colNameDef) {
          if (!!this.currentMatch[key]) {
            colName = this.currentMatch[key + "Name"];
            colName =
              colName == null || undefined == colName
                ? this.colNameDef[key]
                : colName;

            colArray.push({
              value: key,
              label: colName,
            });
          }
        }

        if (!!this.currentMatch.sieveArray) {
          this.currentMatch.sieveArray.forEach((item) => {
            sieveArray.push({
              value: item.toString().replace(".", "d"),
              label: item,
            });
          });
        }
      }

      this.sieveControl = sieveArray;
      this.colControl = colArray;
    },

    /**
     * 获取图形数据
     */

    async getTxChartData() {
      // 如果没有配方号获取没有时间，获取最新一条符合条件的数据
      // 判断是否需要获取最新一条数据
      this.loadingTx = true;
      if (
        !this.queryParams.stationCode ||
        !this.queryParams.matchCode ||
        !this.queryParams.day
      ) {
        await getLatestData(this.queryParams).then((res) => {
          if (!!res) {
            let dischargeTime = res.dischargeTime;
            if (10 < dischargeTime.length) {
              this.dayA = dischargeTime.substring(0, 10);
            }
            this.stationCodeA = res.stationCode;
            this.matchCodeA = res.matchCode;
          }
        });
      }

      // 查询需要显示的数据
      getDayChartData({
        stationCode: this.stationCodeA,
        matchCode: this.matchCodeA,
        day: this.dayA,
      })
        .then((res) => {
          this.createChartTx(res);
          this.loadingTx = false;
        })
        .catch((error) => {
          this.createChartTx(undefined);
          this.loadingTx = false;
        });
    },
    /**
     * 创建图表
     */
    createChartTx(res) {
      console.log(res);
      // 清空当前数据
      if (null == this.chartTx) {
        this.chartTx = echarts.init(document.getElementById("gradeGlobalChar"));
      } else {
        this.chartTx.clear();
      }

      // 获取结果数据
      let station = { name: "--" };
      let targetMap = {};
      let sieveDataList = [];
      let matchType = {};
      let matchThreshold = {};
      if (!!res) {
        if (!!res.station) {
          station = res.station;
        }
        if (!!res.targetMap) {
          targetMap = res.targetMap;
        }
        if (!!res.sieveDataList) {
          sieveDataList = res.sieveDataList;
        }
        if (!!res.asphaltMatchType) {
          matchType = res.asphaltMatchType;
          matchType.sieveArray = JSON.parse(matchType?.sieveArray);
        }
        if (!!res.matchThreshold) {
          matchThreshold = res.matchThreshold;
        }
      }

      // 设置提示信息
      this.info =
        station.name +
        "  " +
        this.matchCodeA +
        " @ " +
        this.dayA +
        " 盘数：" +
        sieveDataList.length;
      console.log(this.info);
      // 折线图数据
      let xData = [0];
      let minData = [undefined];
      let maxData = [undefined];
      let tarData = [undefined];
      let seriesList = [];
      let sieveCodeArray = [];
      if (!!matchType.sieveArray) {
        matchType.sieveArray.forEach((item) => {
          xData.push(item);

          let code = item.toString().replace(".", "d");
          sieveCodeArray.push(code);
          minData.push(matchThreshold["sieve" + code + "min"]);
          maxData.push(matchThreshold["sieve" + code + "max"]);
          tarData.push(targetMap[code]);
        });
      }

      // 处理生产数据
      sieveDataList.forEach((sieveData) => {
        let relData = [undefined];

        sieveCodeArray.forEach((code) => {
          relData.push(sieveData["sieve" + code]);
        });
        seriesList.push({
          name: "生产级配",
          type: "line",
          data: relData,
          itemStyle: {
            normal: {
              color: "#409eff",
            },
          },
        });
      });

      seriesList.push({
        name: "施工下限",
        type: "line",
        data: minData,
        itemStyle: {
          normal: {
            color: "#F3637C",
            lineStyle: {
              type: "dotted", //'dotted'虚线 'solid'实线
            },
          },
        },
      });
      seriesList.push({
        name: "施工上限",
        type: "line",
        data: maxData,
        itemStyle: {
          normal: {
            color: "#F3637C",
            lineStyle: {
              type: "dotted", //'dotted'虚线 'solid'实线
            },
          },
        },
      });
      seriesList.push({
        name: "设计生产级配",
        type: "line",
        data: tarData,
        itemStyle: {
          normal: {
            color: "#4CCB72",
            lineStyle: {
              type: "solid", //'dotted'虚线 'solid'实线
            },
          },
        },
      });

      // 绘制折线图
      let option = {
        title: {
          text: "全局图（" + this.matchCodeA + "）" + this.dayA,
        },
        legend: {
          data: ["设计生产级配", "施工上限", "施工下限"],
          right: 80,
        },
        tooltip: {
          show: false,
        },
        xAxis: {
          name: "筛孔尺寸",
          boundaryGap: false,
          nameTextStyle: {
            padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
          },
          nameRotate: 0,
          data: xData,
        },
        yAxis: {
          type: "value",
          name: "通过率%",
        },
        grid: {
          top: 60,
          bottom: 40,
          left: 80,
          right: 80,
        },
        series: seriesList,
      };

      this.chartTx.setOption(option);
    },

    // getDayChartData
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 手动校验
    handleCheck() {
      this.$confirm('正式系统禁止手动预警！', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass:'confirm-model',
        type: 'warning',
      }).then(_ => {
        this.checkLoading = true
        if (this.ids.length) {
          handCheck({ ids: this.ids }).then((res) => {
            this.checkLoading = false
            if (res.code == 200) {
              this.$message.success('手动校验成功！')
              this.resetQuery()
            } else {
              this.$message.error('手动校验失败！')
            }
          }).catch(
            (err) => {
              this.$message.error('手动校验失败！')
              this.checkLoading = false
            }
          )
        } else {
          this.checkLoading = false
          this.$message.error('请先在表格内勾选您要校验的数据！')
        }
      })
    },
  },
};
</script>
<style scoped lang="scss">
.app-monitor-b {
  padding-top: 16px;
  user-select: none;

  .tabsBox {
    margin: 0 20px;
  }

  .link {
    color: #2d8cf0 !important;
  }
}

.fenye {
  width: 100%;
  height: 80px;
}
</style>

<style scoped>
#lineChar {
  height: 28.571429rem;
  width: 100%;
}

#gradeGlobalChar {
  width: 1000px;
  height: 500px;
}

.el-col {
  border: 1px solid transparent;
}
</style>

